<template>
  <div class="upload-hd" v-if="images != null">
    <div class="imgs mr-10 mb-10" v-for="(item, index) in images.split(';')" :key="index">
      <van-image
        @click="preview(images, index)"
        :key="index"
        width="60"
        height="60"
        :src="baseUrl + item"
      />
    </div>
  </div>
</template>
<script>
import { ImagePreview } from "vant";
export default {
  components: { ImagePreview },
  props: {
    images: {},
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
    };
  },
  methods: {
    preview(item, index) {
      let arry = [];
      this.images.split(";").map((item, index) => {
        arry.push(this.baseUrl + item);
      });
      ImagePreview({
        images: arry,
        startPosition: index,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.upload-hd {
  display: flex;
  flex-wrap: wrap;
  .upload-img,
  .imgs {
    position: relative;
    width: 60px;
    height: 60px;
  }
}
</style>
